<template>
  <div class="home">
    <div>
      {{ $store.state.num }}
    </div>
    <div>
      {{num }}
    </div>

    <div>
      <button @click="add">点击</button>
    </div>
  </div>
</template>

<script>
// Vuex专门引入了一个函数简化状态获取操作
//将计算属性用mapState函数包裹，它会自动调用这个函数，并且自动指向$store.state里面的变量
import { mapState } from 'vuex'
export default {
  data () {
    return {
      count: 10,

    }
  },
  name: "Home",
  computed:
    mapState({
      //不可以使用箭头函数，且这个是放在computed对象里使用的，
      // num () {
      //   return this.$store.state.num
      // }
      //1、基本用法
      // num (state) {
      //   //这里的state是store的整个state
      //   return state.num
      // }

      //2、使用箭头函数
      // num: state => state.num
      //3、 vuex提供写法 (num是state中的字段名称)
      //num: 'num'
      //4/当你的计算属性 需要依赖vuex中的数据 同时  依赖组件中data的数据
      num (state) {
        return state.num + this.count
      }
    }),
  methods: {
    add () {
      //点击按钮需要触发mutation
      this.$store.commit("updateNum", 1);
    },
  },
};
</script>
<style scoped>
</style>
